import { Modal, Button, Table, Form, Row, Col, TreeSelect, Input } from 'antd';
import { connect } from 'dva';
import React from 'react';

const { TreeNode } = TreeSelect;
const { Search } = Input;

class ReferenceAnswer extends React.Component {
  state = {
    visible: false,
    table: {
      page: 1,
      size: 6,
      total: 0,
      categoryId: '',
      query: '',
    },
    list: [],
    treeData: [],
  };

  componentDidMount() {
    this.getCategoryData();
    this.getQuoteAnswer();
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };

  onChange = value => {
    let { table } = this.state;
    table.query = value;
    table.page = 1;
    this.setState(
      {
        table,
      },
      () => {
        this.getQuoteAnswer();
      }
    );
  };

  onTreeChange = value => {
    let { table } = this.state;
    table.categoryId = value;
    table.page = 1;
    this.setState(
      {
        table,
      },
      () => {
        this.getQuoteAnswer();
      }
    );
  };

  getQuoteAnswer = () => {
    const { dispatch } = this.props;
    let { table, list } = this.state;
    dispatch({
      type: 'intentionsList/getQuoteAnswer',
      payload: {
        query: table.query,
        page: table.page,
        limit: table.size,
        categoryId: table.categoryId,
        queryType: 'question',
        sortType: 'updateTime',
        isNoneAnswer: 'false',
      },
      callback: res => {
        list = res.list;
        table.total = res.total;
        this.setState({
          table,
          list,
        });
      },
    });
  };

  handlePage = value => {
    let { table } = this.state;
    table.page = value;
    this.setState(
      {
        table,
      },
      () => {
        this.getQuoteAnswer();
      }
    );
  };

  getCategoryData = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'intentionsList/getAnswerCategory',
      payload: {},
      callback: res => {
        let arr = [];
        console.log(res);
        if (res) {
          arr.push(res[0]);
          this.setState({
            treeData: arr,
          });
        }
      },
    });
  };

  render() {
    const renderTreeNode = data => {
      return data.map(item => {
        if (item.children) {
          return (
            <TreeNode title={item.text} key={item.data.path} value={item.id} id={item.id}>
              {renderTreeNode(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode title={item.text} key={item.data.path} value={item.id} id={item.id} />;
      });
    };

    const columns = [
      {
        title: '标准问',
        dataIndex: 'question',
        key: 'question',
        width:100
      },
      {
        title: '答案',
        dataIndex: 'answer',
        key: 'answer',
        render: text => {
          return <div style={{overflow: 'auto'}} dangerouslySetInnerHTML={{ __html: text }} />;
        },
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width:150,
        render: (text, item) => {
          return (
            <Button
              htmlType="button"
              size="small"
              icon="link"
              onClick={() => this.props.onOk(item)}
            >
              引用
            </Button>
          );
        },
      },
    ];

    const { visible, onCannel } = this.props;
    const { treeData, list, table } = this.state;
    return (
      <div>
        <Modal
          title="引用答案"
          visible={visible}
          onOk={this.handleOk}
          onCancel={onCannel}
          width={1000}
          footer={null}
          destroyOnClose
        >
          <Row style={{ marginBottom: '10px' }}>
            <Col span={5} style={{ marginRight: '10px' }}>
              <TreeSelect
                showSearch
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="全部分类"
                allowClear
                treeDefaultExpandAll
                onChange={val => this.onTreeChange(val, 1)}
              >
                {renderTreeNode(treeData)}
              </TreeSelect>
            </Col>
            <Col span={5}>
              <Search
                placeholder="请输入关键字搜索问题"
                onSearch={value => this.onChange(value, 2)}
                style={{ width: 200 }}
              />
            </Col>
          </Row>
          <Table
            dataSource={list}
            columns={columns}
            rowKey={'id'}
            pagination={{
              total: table.total,
              current: table.page,
              onChange: this.handlePage,
              pageSize: 10,
            }}
            scroll={{ y: '60vh' }}
          />
        </Modal>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(ReferenceAnswer));
